<template>
  <div class="accredited">
    <!-- 头部 -->
    <div class="accredited-header">
      <div class="back" @click="backToHome"><img src="@/assets/images_accredited/sy_back_icon.png" alt="sy_back_icon">返回到首页</div>
      <div class="container">
        <div class="title">欢迎认证<span class="spacing"></span><span>中恒e纺企业账号</span></div>
        <div class="bar">
          <div v-for="(item,index) in step" :key="index" class="bar-item" :class="{finish:item.finish}">
            <div class="line first"></div>
            <div class="dot">
              <div class="dot-title">{{item.title}}</div>
            </div>
            <div class="line second"></div>
          </div>
        </div>
      </div>
    </div>

    <main class="accredited-main w">
      <!-- <Breadcrumb></Breadcrumb> -->

      <!-- 未填写 -->
      <div v-if="form.status==='0'">
        <ApproveForm
        v-if="renderForm"
        :form="form"
        :address="address"
        :pictures="pictures"
        @onProvinceChange="onProvinceChange"
        @onCityChange="onCityChange"
      ></ApproveForm>
      </div>

      <!-- 认证结果 成功 -->
      <div v-if="form.status==='3'">
        <ApproveSuccess
          :form="form"
          :address="address"
          :pictures="pictures"
          @showDetail="handleChangeView"
        ></ApproveSuccess>
        <!-- <ApproveForm
          v-show="changeView"
          v-if="renderForm"
          :form="form"
          :address="address"
          :pictures="pictures"
          @back="handleChangeView"
          @onProvinceChange="onProvinceChange"
          @onCityChange="onCityChange"
        ></ApproveForm> -->
      </div>

      <!-- 认证结果 失败 -->
      <div v-if="form.status==='2'">
        <ApproveReject
          v-show="!changeView"
          @showDetail="handleChangeView"
        >
        </ApproveReject>
        <ApproveForm
          v-show="changeView"
          v-if="renderForm"
          :form="form"
          :address="address"
          :pictures="pictures"
          @back="handleChangeView"
          @onProvinceChange="onProvinceChange"
          @onCityChange="onCityChange"
        ></ApproveForm>

      </div>
      <!-- 等待审批 -->
      <div v-if="form.status==='1'">
        <div class="accredited-main-nav" >
          <div class="breadcrumb">首页>申请企业认证>等待审批</div>
          <div class="info"><img src="@/assets/images_accredited/check_icon.png" alt="check_icon">请您耐心等候，我们将在72小时内完成审批</div>
        </div>

        <ApproveForm
          v-if="renderForm"
          :form="form"
          :address="address"
          :pictures="pictures"
          @back="changeView"
          @onProvinceChange="onProvinceChange"
          @onCityChange="onCityChange"
        ></ApproveForm>

      </div>
    </main>
    <!-- 页脚 -->
    <div class="accredited-footer">
      <p class="record">中恒纺织交易市场（广东）有限公司   粤ICP备19042832号-1</p>
      <p class="link">关于我们  |  联系我们 </p>
    </div>

  </div>
</template>

<script>
import {approve,getShopInfo,uploadFile,getUrl} from "@/api/shop/api";
import ApproveSuccess from './components/ApproveSuccess'
import ApproveForm from './components/ApproveForm'
import ApproveReject from './components/ApproveReject'
import {address} from '@/config/address'
import Breadcrumb from '@/components/Breadcrumb'


const form = {
	"abbreviation": "",//!简称
	"alladdr1": "",//!区
	"alladdr2": "",//!市
	"alladdr3": "",//!省
	"alladdrfull": "",//!详细地址
	"allbankaccount": "",//!银行账号
	"allbankaddr1": "",
	"allbankaddr2": "",
	"allbankname": "",//!开户银行
	"allemail": "",
	"allidcard": "",//!法人身份证号
	"allinvoicei": "",//!开票资料
	"alllogo": "",//企业logo
	"allname": "",//!公司名称
	"allpeople": "",//!联系人姓名
	"allphone1": "",//!联系电话/邮箱
	"belong": "1",//!认证类型
	"companyintroduce": "",
	"dztime": "",
	"ghandidcardi": "",
	"gidcardbacki": "",
	"gidcardi": "",
	"id": "",
	"isagent": "",//!国外代理
	"isbusiness": "",//!商城卖家
	"isbuyer": "",//!商城买家
	"iscustom": "",//!业务客户
	"ishuodai": "",//!货代公司
	"isopcer": "",//!开证公司
	"isplat": "",
	"issell": "",
	"isservicestatus": "",
	"issh": "",
	"isstorage": "",//!仓储公司
	"iswms": "",
	"keyword": "",
	"line": "",
	"mainvarieties": "",
	"openstatus": "",
	"q3is1": "",
	"qauthbook": "",//!授权书
	"qbanki": "",
	"qbusinesslicence": "",//!营业执照
	"qcapital": "",//!注册资本
	"qcapitalbz": "",//!币种
	"qcertnum": "",
	"qcomptype": "",//!公司类型
	"qlegalperson": "",//!公司法人
	"qorgi": "",
	"qtaxi": "",
	"qtaxnum": "",//!公司税号
	"reject": "",
	"servicetype": "",
	"shopcontacts": "",
	"shoplogo": "",
	"shopname": "",
	"shopnum": "",
	"shopphone": "",
	"status": "0",
	"vxappid": "",
	"vxsecret": "",
	"vxtoken": "",
	"vxtokentime": "",
	"wmsstop": ""
}
export default {
  name:'approve',
  components:{
    ApproveSuccess,
    ApproveForm,
    ApproveReject,
    Breadcrumb
  },
  computed:{
    address(){
      return {
        province:this.province,
        city:this.city,
        district:this.district
      }
    },
     //绑定企业状态 -1:已删除 0:未提交 1:待审核 2:驳回 3:审核通过 4:冻结 5:无须认证 6:未绑定
     //2:驳回代表认证不通过
  },
  activated(){
    console.log('activated');
  },
  async mounted(){

      getShopInfo().then(res=>{
      //一把梭赋值
      this.form = Object.assign({},res.data)

      //绑定企业状态 -1:已删除 0:未提交 1:待审核 2:驳回 3:审核通过 4:冻结 5:无须认证 6:未绑定
      //2:驳回代表认证不通过
      this.form.alladdr3 = Number(this.form.alladdr3) || null
      this.form.alladdr2 = Number(this.form.alladdr2) || null
      this.form.alladdr1 = Number(this.form.alladdr1) || null

      if(this.form.alladdr1){
        this.city = this.province.find(item=>item.value===Number(this.form.alladdr1)).children
      }
      if(this.form.alladdr2){
        this.district = this.city.find(item=>item.value===Number(this.form.alladdr2)).children
      }

      this.renderForm = true

      //进度条
      if(this.form.status==='0' || this.form.status==='2'){
        //填写信息
        this.step[0].finish = true
      }else if(this.form.status==='1'){
        //等待审批
        this.step[0].finish = true
        this.step[1].finish=true
      }else if(this.form.status==='3'){
        //认证结果
        this.step[0].finish = true
        this.step[1].finish=true
        this.step[2].finish=true
      }
    })
  },
  data(){
    return {
      loading:true,
      pictures:{},
      city:[],
      district:[],
      province:address.slice(),
      changeView:false,
      renderForm:false,
      //选框组
      form:{...form},
      step:[
        {finish:false,title:'填写信息',id:0},
        {finish:false,title:'等待审批',id:1},
        {finish:false,title:'认证结果',id:2},
      ],
      breadcrumbs:['首页','申请企业认证']
    }
  },
  methods:{
    backToHome(){
      this.$router.push({path:'/'})
    },
    handleChangeView(){
      this.changeView = !this.changeView
    },
    onProvinceChange(province){
      //修改选项
      this.city = this.province.find(item=>item.value===province).children
      this.form.alladdr3 = null
      this.form.alladdr2 = null
    },
    onCityChange(city){
      this.district = this.city.find(item=>item.value===city).children
      this.form.alladdr3 = null
    },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/web_common.scss';
html{
  font-size:100px!important;
}

.accredited{
  min-width:12rem;
  min-height: 100vh;
  display: flex;
  flex-flow:column nowrap;


  &-header{
    position:relative;
    width: 100%;
    height: 3.52rem;
    background-color: pink;
    background:url('~@/assets/images_accredited/top_bg_pic.png');
    display: flow-root;

    .back{
      color: #fff;
      border-radius:.04rem;
      position:absolute;
      font-size: .16rem;
      left: .3rem;
      top: .3rem;
      width: 1.34rem;
      height: .36rem;
      line-height: .36rem;
      text-align: center;
      background-color: #0E294E;
      cursor: pointer;
      img{
        width: .2rem;
        margin-right: .06rem;
      }
    }

    .container{
      margin-top: .95rem;
      display: flex;
      flex-flow:column nowrap;
      align-items: center;
      .title{
        height: .56rem;
        font-size: .56rem;
        color:#fff;
        font-weight: 100;
        span{
          font-weight: 700;
        }
        .spacing{
          display: inline-block;
          vertical-align: middle;
          margin: 0 .18rem;
          padding:.04rem;
          background-color: #fff;
        }
      }

      .bar{
        margin-top: .7rem;
        display: flex;
        align-items: center;
        color: #fff;

        &-item{
          display: flex;
          align-items: center;
          &:first-child .line.first,&:last-child .line.second{
            display: none;
          }
          .dot{
            width: 0;
            height: 0;
            position:relative;
            padding: .09rem;
            border-radius: 50%;
            background-color: #888F9F;
            font-size: .18rem;
            color: #888F9F;
            margin-right: 2.48rem;
            margin: .2rem;
            &-title{
              position:absolute;
              transform: translate(-50%,-50%);
              left:50%;
              top: calc(50% + .38rem) ;
              white-space:nowrap;
            }

          }
          &.finish .dot{
            padding:.12rem;
            &:after{
              content:'';
              background-color: #fff;
              padding: .09rem;
              position:absolute;
              left:50%;
              top: 50%;
              transform: translate(-50%,-50%);
              border-radius: 50%;
            }
            &-title{
              color: #fff;
            }
          }
          .line{
            position:relative;
            width: 1.24rem;
            height: .01rem;
            background-color: #888F9F;
          }
          &.finish .line{
            background-color: #fff;
          }
        }
      }
    }


  }

  &-main{
    min-width: 12rem;
    margin:0 auto;
    flex-grow: 1;
    padding: .6rem 0;
    // padding-bottom: 2rem;


    &-nav{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .info{
        background-color: #FFEDED;
        border-radius: .08rem;
        padding: .17rem .23rem .18rem .23rem;
        font-size: .2rem;
        color: #E41616;
        img{
          margin-right: .1rem;
          vertical-align: top;
          width: .22rem;
          height: .22rem;
        }
      }
    }
  }

  &-footer{
    margin:.1rem 0;
    line-height: .32rem;
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    text-align: center;
    color: rgba($color: #234EB1, $alpha: .3);
    font-size: .12rem;
    .record{
      height:.32rem;
      border-bottom: .01rem solid rgba($color: #234EB1, $alpha: .3);
    }
    .link{
      height:.32rem;
    }

  }
}


</style>
